<template>
  <div class="user">
    <Dropdown @on-click="handleClick">
      <!-- 头像-->
      <a href="javascript:void(0)">
        <Avatar shape="square" src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
        <div style="float: right;margin-left: 10px">{{ state.user_name }}</div>
      </a>
      <template #list>
        <DropdownMenu>
          <DropdownItem name="personal-center">
            <Icon type="ios-contact-outline" style="margin-right: 4px"/>
            个人中心
          </DropdownItem>
          <DropdownItem name="settings">
            <Icon type="ios-settings-outline" style="margin-right: 4px"/>
            设置
          </DropdownItem>
          <DropdownItem divided name="log-out">
            <Icon type="ios-log-out" style="margin-right: 4px"/>
            退出登录
          </DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {clearAllStore, getStore} from "@/api/utils";
import {getCurrentInstance} from "vue";
import router from "@/router";

const {proxy} = getCurrentInstance();
const state = reactive({
  user_name: getStore('user_name')
})

// 处理下拉菜单栏点击事件
const handleClick = (name) => {
  console.log(name)
  switch (name) {
    case 'log-out':
      logOut();
      break;
    default:
      break;
  }
}

// 退出登录方法
const logOut = () => {
  proxy.$Modal.confirm({
    title: '退出登录确认',
    content: '<p>您确定退出当前登录账户吗？打开的标签页和未保存的数据将会被清空。</p>',
    onOk: () => {
      clearAllStore();
      router.replace('/login')
    },
    onCancel: () => {
      return;
    }
  })
}
</script>

<style scoped lang="less">
@import "./user.less";
</style>
